<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        1234哈哈哈哈哈哈哈哈哈，mmhhhrgertgr，他认为太过温柔,rfwerfw子啊和ui收费后
    </div>
</body>
<style>
    #app {
        width: 200px;
        overflow: hidden;
        border: 1px solid red;
        /**
            这是一个早期的弹性盒子模型，作用是把元素变成伸缩盒子容器，从而启用后续的文本截断功能。
        */
        display: -webkit-box;
        /* 设置伸缩盒子子元素排列方向为垂直方向（纵向排列 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;  /* 限制显示行数 */

    }
</style>
</html>